<template>
	<div class="content">
		<h2><i class="iconfont icon-jinbi"></i>商户管理</h2>
		<div class="content-wrap">
			<!--搜索分类-->
			<div class="search">
				<div class="search__list">
					<div class="search__list--title search__list--title-tip">分类</div>
					<el-select v-model="params.company_cate_id" size="mini">
						<el-option v-for="(item, index) in companyCateList" :key=index :label="item.cate_name" :value="item.company_cate_id"></el-option>
					</el-select>
				</div>
				<div class="search__list">
					<div class="search__list--title">会员号</div>
					<el-input placeholder="会员号" v-model="params.mobile" clearable size="mini"></el-input>
				</div>
				<div class="search__list">
					<div class="search__list--title">商户名称</div>
					<el-input placeholder="商户名称" v-model="params.company_name" clearable size="mini"></el-input>
				</div>
				<div class="search__list">
					<el-button type="primary" @click="loadData" size="mini">查找</el-button>
				</div>
			</div>
			<!--商品展示表格-->
			<div class="content-table" v-loading="loading" >
				<el-table :data="data" strip size="mini">
					<el-table-column label="会员号" prop="member.mobile" width="120"></el-table-column>
					<el-table-column label="商户名称" prop="company_name"></el-table-column>
					<el-table-column label="所属分类" prop="copmanyCate">
						<template slot-scope="scope" >
							<span v-if="scope.row.companyCate">{{scope.row.companyCate.cate_name}}</span>
						</template>
					</el-table-column>
					<el-table-column label="所属区域" prop="area_names"></el-table-column>
					<el-table-column label="商户地址" prop="address"></el-table-column>
					<el-table-column label="商户介绍" prop="introduce"></el-table-column>
					<el-table-column label="开通时间" prop="regist_time">
						<template slot-scope="scope" >
							<span v-if="scope.row.regist_time">{{scope.row.regist_time|formatTime}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="300">
						<template slot-scope="scope" >
							<el-button 
								type="primary"
								size="mini"
								@click="setCompanyCate(scope.row)">
								设置分类
							</el-button>
							<el-button 
								size="mini"
								type="primary"
								@click="setCompanyArea(scope.row)">
								设置区域
							</el-button>
							<el-button
								v-if="scope.row.is_show_in_app == 1"
								type="primary"
								size="mini"
								@click="setIsShowInApp(scope.row.company_id, 0)">
								隐藏
							</el-button>
							<el-button
								v-else
								type="primary"
								size="mini"
								@click="setIsShowInApp(scope.row.company_id, 1)">
								显示
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination 
				@current-change="handleCurrentChange"
				background 
				layout="total, prev, pager, next, jumper"
				:total="totalNum" 
				class="fr"
				>
			</el-pagination>
			<div class="model" v-if="showModel">
				<h2 class="model__title">
					设置分类
					<span @click="setCompanyCateCancel" class="model__title--close">&times;</span>
				</h2>
				<div class="model__content" v-loading="loading">
					<el-form ref="form" label-width="120px">
						<el-form-item label="选择分类">
							<el-select v-model="company_cate_id" size="mini">
								<el-option v-for="(item, index) in companyCateList" :key=index :label="item.cate_name" :value="item.company_cate_id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="setCompanyCateOk" size="mini">
								<span>保存</span>
							</el-button>
							<el-button type="info" @click="setCompanyCateCancel" size="mini">
								<span>取消</span>
							</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="model" v-if="showAreaModel">
				<h2 class="model__title">
					选择区域
					<span @click="setCompanyAreaCancel" class="model__title--close">&times;</span>
				</h2>
				<div class="model__content">
					<el-form label-width="120px">
						<el-form-item label="选择区域">
							<s-get-area @getArea="handleGetArea"></s-get-area>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="setCompanyAreaOk" size="mini">
								<span>保存</span>
							</el-button>
							<el-button type="info" @click="setCompanyAreaCancel" size="mini">
								<span>取消</span>
							</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import getArea from "../../components/cascader/province_cascader.vue"
	export default {
		created() {
			this.loadCateData();
			this.loadData();
		},
		components: {
			"s-get-area": getArea
		},
		data() {
			return {
				params: {
					company_cate_id: null,
					mobile: null,
					company_name: null,
					page: 1,
					rows: 10
				},
				showModel: false,
				data: null,					//提现数据			
				loading: true,				//加载小圈圈
				totalNum: 0,					//返回数据总数，用于分页那里显示
				companyCateList: [],
				company_id: null,
				company_cate_id: null,
				showAreaModel: false,
				area_id: null
			}
		},
		methods: {
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.loadData();
			},
			loadCateData() {
				var url = this.url + '/company/cate_get_list.action';
				var params = {};
				this.$http.get(url,{ params }).then((res)=> {
					this.companyCateList = res.data.result.rows;
				});
			},
			loadData() {
				this.loading = true;
				var url = `${this.url}/company/company_get_list.action`;
				var params = this.params;
				this.$http.get(url,{ params }).then((res)=> {
					this.totalNum = res.data.result.total;
					this.loading = false;
					this.data = res.data.result.rows;
					// 区域
					this.data.forEach(function(item) {
						var area_names = "";
						if(item.areas) {
							item.areas.forEach(function(r) {
								if(r.area_name)
									area_names = r.area_name + area_names;
							})
						}
						item.area_names = area_names;
					});
				});
			},
			setCompanyCate(row) {
				this.showModel = true;
				this.company_id = row.company_id;
				if(row.companyCate)
					this.company_cate_id = row.companyCate.company_cate_id;
				else
					this.company_cate_id = null;
			},
			setCompanyCateCancel() {
				this.showModel = false;
			},
			setCompanyCateOk() {
				this.showModel = false;
				this.loading = true;
				var url = `${this.url}/company/company_set_company_cate.action`;
				var params = {
					company_id: this.company_id,
					company_cate_id: this.company_cate_id
				};
				this.$http.get(url,{ params }).then((res)=> {
					this.loading = false;
					if( res.data.success ) {
						this.loadData();
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			handleGetArea(area_id) {
				this.area_id = area_id;
			},
			setCompanyArea(row) {
				this.showAreaModel = true;
				this.company_id = row.company_id;
			},
			setCompanyAreaCancel() {
				this.showAreaModel = false;
			},
			setCompanyAreaOk() {
				if(!this.area_id) {
					this.$message({
						type: "error",
						message: "请选择区域"
					});
					return;
				}
				this.showAreaModel = false;
				this.loading = true;
				var url = `${this.url}/company/company_set_company_area.action`;
				var params = {
					company_id: this.company_id,
					area_id: this.area_id
				};
				this.$http.get(url,{ params }).then((res)=> {
					this.loading = false;
					if( res.data.success ) {
						this.loadData();
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			setIsShowInApp(company_id, is_show_in_app) {
				this.loading = true;
				var url = `${this.url}/company/company_set_is_show_in_app.action`;
				var params = {
					company_id: company_id,
					is_show_in_app: is_show_in_app
				};
				this.$http.get(url,{ params }).then((res)=> {
					this.loading = false;
					if( res.data.success ) {
						this.loadData();
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.model {
	width: 400px;
	height: 200px;
	left: calc(50% - 200px);
	top: calc(50% - 100px);
}
</style>